define([
	'jquery',
	'underscore',
	'backbone',
	'mobiscroll',
	'autocomplete',
	'text!tpl/ParksListHeaderView.html',
	'collections/ParksCollection',
	'views/ParksListHeaderView',
	'views/ParksListItemView'],

function($, _, Backbone, mobiscroll, autocomplete,
ParksListHeaderViewTemplate,
ParksCollection,
ParksListHeaderView,
ParksListItemView) {

	var ParksListHeaderView = Backbone.View.extend({

		template: _.template(ParksListHeaderViewTemplate),

		$el: '',

		events: {
			'click #btn-search': 'onClickBtnSearch',
			'submit #header-form': 'onSubmitHeaderForm',
			'keydown #search-input': 'onChangeInputSearch',
			'change #dropdown-category': 'onChangeCategoryFilter',
			'change #dropdown-region': 'onChangeRegionFilter',
			'change #dropdown-province': 'onChangeProvinceFilter'
		},

		initialize: function() {
			this.$el = $(this.template());

			App.eventHandler.off('ParksListHeaderView:initializeAutocomplete').on('ParksListHeaderView:initializeAutocomplete', this.initializeAutocomplete, this);

			this.render();

			this.headerTitle = this.$el.find('#header-title');

			this.headerForm = this.$el.find('#header-form');

			this.headerSearch = this.$el.find('#search-input');

			this.parksList = $('#parks-list');

			this.initializeMobiscroll();

			Globals.fixedPolyfill('header-filters');
		},

		render: function() {
			$(this.options.$parent).html(this.$el);
		},

		onSubmitHeaderForm: function(e) {
			e.preventDefault();
		},

		onClickBtnSearch: function(e) {
			e.preventDefault();
			this.headerTitle.toggleClass('hide');
			this.headerForm.toggleClass('hide');

			if (!this.headerForm.hasClass('hide')) {
				this.headerForm.find('input').val('').focus().select().click();
			}
		},

		onChangeInputSearch: function() {
			if (this.headerSearch.val().length >= 2) {
				this.showItems(true);
			} else {
				this.showItems(false);
			}
		},

		onChangeCategoryFilter: function() {
			App.eventHandler.trigger('ParksListView:categoryFilter', $('#dropdown-category').val());
		},

		onChangeRegionFilter: function() {
			App.eventHandler.trigger('ParksListView:regionFilter', $('#dropdown-region').val());
		},

		onChangeProvinceFilter: function() {
			App.eventHandler.trigger('ParksListView:provinceFilter', $('#dropdown-province').val());
		},

		showItems: function(bool) {
			var item = null;

			if (!this.list) {
				this.list = $('#parks-list li');
			}

			for (var x = 0, l = this.list.length; x < l; x++) {
				item = $(this.list[x]);
				if (bool) {
					if (item.id != this.showItem.id) {
						item.hide();
					}
				} else {
					item.show();
				}
			}
		},

		initializeMobiscroll: function() {
			var options = {
				theme: 'android-ics light',
				mode: 'scroller',
				display: 'modal',
				lang: 'es',
				inputClass: 'dropdown'
			};

			$('#dropdown-category').mobiscroll().select(options);
			$('#dropdown-region').mobiscroll().select(options);
			$('#dropdown-province').mobiscroll().select(options);
		},

		initializeAutocomplete: function() {
			var self = this,
				names = [],
				list = document.getElementById('parks-list'),
				items = list.getElementsByTagName('li'),
				item = null,
				itemsId = [];

			for (var x = 0, l = items.length; x < l; x++) {
				item = items[x];
				names.push({
					name: item.innerText,
					el: item
				});
			}

			this.headerForm.find('input').autocomplete(names, {
				matchContains: true,
				highlightItem: false,
				autoFill: false,
				formatItem: function(row, i, max, term) {
					self.showItem = row.el;
					$(row.el).show();
					return row.name.replace(new RegExp("(" + term + ")", "gi"));
				}
			});
		}
	});

	return ParksListHeaderView;
});